<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>控制面板</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Theme style -->
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/adminlte/js/adminlte.min.js' %}"></script>
    <script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>

    <link rel="stylesheet" href="{% static 'plugins/adminlte/css/adminlte.min.css'%}">

    <!-- Font Awesome -->
    <link href="{% static 'plugins/fontawesome-free/css/all.min.css'%}" rel="stylesheet">


    <script type="text/javascript">

        var chart_labels = {{ chart_labels| safe}};
        var make_idphoto = {{ make_idphoto | safe }};
        var change_bg = {{ change_bg | safe }};
        var clip_photo = {{ clip_photo | safe }};
        var compress_photo = {{ compress_photo | safe }};
        var human_style = {{ human_style | safe }};

        $(function () {

            //-----------------------
            // - MONTHLY SALES CHART -
            //-----------------------

            // Get context with jQuery - using jQuery's .get() method.
            var salesChartCanvas = $('#salesChart').get(0).getContext('2d')

            var salesChartData = {
                labels: chart_labels,
                datasets: [
                    {
                        label: '证件照',
                        backgroundColor: '#007bff',
                        borderColor: '#007bff',
                        data: make_idphoto
                    },
                    {
                        label: '更改背景',
                        backgroundColor: '#5a6268',
                        borderColor: '#545b62',
                        data: change_bg
                    },
                    {
                        label: '裁剪照片',
                        backgroundColor: '#dc3545',
                        borderColor: '#dc3545',
                        data: clip_photo
                    },
                    {
                        label: '压缩照片',
                        backgroundColor: '#ffc107',
                        borderColor: '#ffc107',
                        data: compress_photo
                    },
                    {
                        label: '风格化照片',
                        backgroundColor: '#28a745',
                        borderColor: '#28a745',
                        data: human_style
                    },
                ]
            }

            var salesChartOptions = {
                maintainAspectRatio: false,
                responsive: true,
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display: false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display: false
                        }
                    }]
                }
            }

            // This will get the first returned node in the jQuery collection.
            // eslint-disable-next-line no-unused-vars
            var salesChart = new Chart(salesChartCanvas, {
                type: 'line',
                data: salesChartData,
                options: salesChartOptions
            }
            )

            //---------------------------
            // - END MONTHLY SALES CHART -
            //---------------------------
        })

    </script>
</head>

<body class="content-wrapper" data-widget="iframe">

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Info boxes -->
            <p></p>
            <!--顶部汇总栏-->
            <div class="row">
                <!--版本提示信息-->

                {% if version %}
                <div class="col-12">
                    <div class="callout callout-info">
                        <h5><i class="fas fa-info"></i> {{version}}</h5>
                        {{description}}
                    </div>
                </div>
                {% endif %}
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info elevation-1"><i class="fa fa-bars"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">订单总数</span>
                            <span class="info-box-number">
                                {{orders_total}}
                            </span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-danger elevation-1"><i class="fa fa-cart-plus"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">新增订单数</span>
                            <span class="info-box-number">{{orders_today}}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->

                <!-- fix for small devices only -->
                <div class="clearfix hidden-md-up"></div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-success elevation-1"><i class="fas fa-users"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">总客户数</span>
                            <span class="info-box-number">{{users_total}}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-warning elevation-1"><i class="fa fa-user-plus"></i></span>

                        <div class="info-box-content">
                            <span class="info-box-text">新增用户数</span>
                            <span class="info-box-number">{{users_today}}</span>
                        </div>
                        <!-- /.info-box-content -->
                    </div>
                    <!-- /.info-box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <!--图表栏-->
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">收入概况</h5>

                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="text-center">
                                        <strong>{{chart_title}}</strong>
                                    </p>

                                    <div class="chart">
                                        <!-- Sales Chart Canvas -->
                                        <canvas id="salesChart" height="180" style="height: 180px;"></canvas>
                                    </div>
                                    <!-- /.chart-responsive -->
                                </div>
                                <!-- /.col -->
                                <div class="col-md-4">
                                    <p class="text-center">
                                        <strong>各功能使用情况</strong>
                                    </p>

                                    <div class="progress-group">
                                        证件照
                                        <span class="float-right"><b>{{make_idphoto_cnt}}</b>/{{func_total}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar"
                                                style="background-color:#007bff;width:{% widthratio make_idphoto_cnt func_total 100 %}%">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.progress-group -->

                                    <div class="progress-group">
                                        更改背景
                                        <span class="float-right"><b>{{change_bg_cnt}}</b>/{{func_total}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar"
                                                style="background-color:#5a6268;width: {% widthratio change_bg_cnt func_total 100 %}%">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- /.progress-group -->
                                    <div class="progress-group">
                                        <span class="progress-text">裁剪照片</span>
                                        <span class="float-right"><b>{{clip_photo_cnt}}</b>/{{func_total}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar"
                                                style="background-color:#dc3545;width: {% widthratio clip_photo_cnt func_total 100 %}%">
                                            </div>
                                        </div>
                                    </div>

                                    <!-- /.progress-group -->
                                    <div class="progress-group">
                                        压缩照片
                                        <span class="float-right"><b>{{compress_photo_cnt}}</b>/{{func_total}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar"
                                                style="background-color:#ffc107;width: {% widthratio compress_photo_cnt func_total 100 %}%">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.progress-group -->
                                    <!-- /.progress-group -->
                                    <div class="progress-group">
                                        风格化照片
                                        <span class="float-right"><b>{{human_style_cnt}}</b>/{{func_total}}</span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar"
                                                style="background-color:#28a745;  width: {% widthratio human_style_cnt func_total 100 %}%">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.progress-group -->
                                </div>
                                <!-- /.col -->
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- ./card-body -->

                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
            <!-- TABLE: LATEST ORDERS -->
            <div class="card">
                <div class="card-header border-transparent">
                    <h3 class="card-title">最新订单</h3>

                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.card-header -->

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table m-0">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>功能名称</th>
                                    <th>收入</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for order in orders %}
                                <tr>
                                    <td>{{order.order_no}}</td>
                                    {% if order.func_name == "证件照"%}
                                    <td style="color:#007bff;">{{order.func_name}}</td>
                                    <td><span class="badge"
                                            style="background-color:#007bff;color:white;">{{order.total}}元</span></td>
                                    {% elif order.func_name == "更改背景" %}
                                    <td style="color:#5a6268;">{{order.func_name}}</td>
                                    <td><span class="badge"
                                            style="background-color:#5a6268;color:white;">{{order.total}}元</span></td>
                                    {% elif order.func_name == "裁剪照片" %}
                                    <td style="color:#dc3545;">{{order.func_name}}</td>
                                    <td><span class="badge"
                                            style="background-color:#dc3545;color:white;">{{order.total}}元</span></td>
                                    {% elif order.func_name == "压缩照片" %}
                                    <td style="color:#ffc107;">{{order.func_name}}</td>
                                    <td><span class="badge"
                                            style="background-color:#ffc107;color:white;">{{order.total}}元</span></td>
                                    {% elif order.func_name == "风格化照片" %}
                                    <td style="color:#28a745;">{{order.func_name}}</td>
                                    <td><span class="badge"
                                            style="background-color:#28a745;color:white;">{{order.total}}元</span></td>
                                    {% else %}
                                    <td>{{order.func_name}}</td>
                                    <td>{{order.total}}元</td>
                                    {% endif %}
                                    <td>
                                        {{order.create_time}}
                                    </td>
                                </tr>
                                {% endfor %}

                            </tbody>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
                </div>
                <!-- /.card-body -->
                <div class="card-footer clearfix">
                    <a href="/admin/orders/order" class="btn btn-sm btn-primary float-right">查看更多订单</a>
                </div>
                <!-- /.card-footer -->
            </div>

        </div>
    </section>


</body>